<template>
    <div>
        <MyTitle title="意见修改"></MyTitle>
        <el-row class="mt10">
            <el-col>
                <el-steps :active="current">
                    <el-step v-for="(item, index ) in steps " :key="index" :title="item.title" :description="item.desc"
                        :icon="item.icon" />
                </el-steps>
            </el-col>
        </el-row>
        <el-row class="mt10 ">
            <el-col v-show="current == 1" class="advisebox">
                <FormAdd #default="{ model }" :toggle="true" ref="myform" :rules="rules" @addForm="getFormData">
                    <el-form-item label="意见标题" prop="title">
                        <el-input clearable v-model="model.title" type="text" placeholder="请输入意见标题"
                            autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="意见类型" prop="type">
                        <el-cascader :options="AdviseTypes" style="width:100%;" middle placeholder="请输入意见类型" clearable
                            v-model="model.type" />
                    </el-form-item>
                </FormAdd>
            </el-col>
            <el-col v-show="current == 2">
                <Tinymce v-model="content" @change="getFuData"></Tinymce>
            </el-col>
            <el-col v-show="current == 3" class="advisebox">

            </el-col>
        </el-row>
        <el-row class="mt10">
            <el-col>
                <el-button type="success" @click="gotonext" v-if="current < steps.length">下一步</el-button>
                <el-button type="primary" @click="gotoprev" v-if="current > 1">上一步</el-button>
                <el-button type="danger" v-if="current == steps.length" @click="submitAdvise">修改意见</el-button>
            </el-col>
        </el-row>

    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, toRaw, onMounted } from 'vue'
import { Edit, Picture, Upload } from '@element-plus/icons-vue'
import { AdviseTypes } from '../../utils'
import { ShowError } from '../../utils/message';
import { Http } from '../../api/api';
import router from '../../router';
import { useStore } from '../../store';
import { useRoute } from 'vue-router';

const store = useStore()
const route = useRoute()
const current = ref<number>(1)
const myform = ref<any>()
const formData = ref<any>({})
const content = ref<any>('')
const steps = reactive([
    { title: '第一步1', desc: '修改意见基本信息', icon: Edit },
    { title: '第二步2', desc: '修改意见主体内容', icon: Picture },
    { title: '第三步3', desc: '欢迎踊跃发表意见', icon: Upload },
])
const rules = reactive<any>({
    title: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '请选择', trigger: 'blur' },
    ],
})
const getFuData = (data: any) => {
    console.log(data)
}
const getFormData = (data: any) => {
    current.value++;
    formData.value = data;
}
const gotonext = () => {
    console.log('123')
    if (current.value == 1) {
        console.log('123456')
        myform.value.submitForm()

    } else {
        console.log(content.value)
        if (content.value) {
            current.value++;
        } else {
            ShowError('请输入意见主体内容')
        }
    }
}
const gotoprev = () => {
    current.value--;
}

const submitAdvise = async () => {
    var data = toRaw(formData.value)
    data.content = content.value;
    data.author = store.userInfo;
    data._id = route.params.aid;
    let res = await Http.updateadvise(data) as any;
    if (res.code == 200) {
        router.push('/advise/list')
    }
}

const getadviseoneData = async () => {
    let res = await Http.getadviseone({
        _id: route.params.aid,
    }) as any;
    if (res.code == 200) {
        formData.value = {
            title: res.result.title,
            type: res.result.type,
        }
        myform.value.model = formData.value
        content.value = res.result.content;
    }
}

onMounted(() => {
    getadviseoneData()
})
</script>


<style lang="scss" scoped>
.advisebox {
    width: 100%;
    height: 340px;
}
</style>